De flex eigenschap

Syntaxis

flex: none | [< 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'>]

Beschrijving

Wanneer een element een flex-item is wordt flex gebruikt in plaats van de hoofdafmeting eigenschap (width of height eigenschappen, zie Een flexibele lay-out maken) om de hoofdafmetingen van het element te bepalen. Als een element geen flex item is heeft flex geen effect.

De beginwaarde is 0 1 auto. De flex-grow en flex-shrink eigenschappen zijn optioneel en kunnen worden weggelaten uit de flex-declaratie.

Wanneer de flex-grow waarde wordt weggelaten, wordt het ingesteld op 1. Merk op dat 1 niet de initiële waarde van de flex-grow eigenschap is!

Wanneer de flex-shrink eigenschap wordt weggelaten, wordt die ingesteld op 1. Merk op dat de flex-krimp-factor wordt vermenigvuldigd met de flex-basis bij de verdeling van de negatieve ruimte. (Zie De flex-shrink eigenschap)

Wanneer de flex-basis waarde wordt weggelaten, wordt die ingesteld op 0%.

De initiële waarden van de flex-grow en flex-shrink eigenschappen verschillen van de standaardwaarden wanneer weggelaten worden in de flex steno-eigenschap. Op die manier is de flex steno-eigenschap beter geschikt voor de meest voorkomende gevallen.

Enkele van de meest voorkomende flex waarden:

flex: 0 auto / flex: initial dit komt overeen met de beginwaarde flex: 0 1 auto. Deze waarde bepaalt de grootte van het item op basis van de width/height eigenschappen. Als de hoofdafmeting eigeschap van het item ingesteld is op auto wordt het de grootte van het flex item berekend op basis van zijn inhoud; dit maakt het flex item inflexibel als er positieve vrije ruimte beschikbaar is, maar maakt het mogelijk om te krimpen tot de min-size wanneer er onvoldoende ruimte is.

flex: auto dit komt overeen met flex: 1 1 auto; deze waarde bepaalt de grootte van het item op basis van de width/ height eigenschappen, maar maakt het flexibel waardoor het de vrije ruimte langs de hoofdas kan absorberen;

flex: none: dit komt overeen met flex: 0 0 auto. Deze bepaalt de grootte van het item op basis van de width / height eigenschappen, maar maakt het flex item inflexibel. Dit komt overeen met initial maar de flex items kunnen niet krimpen, zelfs in situaties waarin ze buiten de flex container vallen.

flex: <positief getal>: Deze waarde is gelijk aan flex: <positief getal> 1 0%. Deze waarde maakt het flex item flexibel en stelt de flex-basis in op nul, waardoor een item dat bepaald deel van de vrije ruimte in de flexibele container absorbeert. Als alle items in de flex container dit patroon gebruiken, zal hun grootte evenredig zijn met de opgegeven flex factor.

Standaard krimpen de flex items niet onder de minimale grootte die de inhoud inneemt (de lengte van het langste woord of een fixed-size element). Om dit te veranderen, stelt u de min-width of min-height eigenschap in.

Wijzig de waarde van de flex eigenschap in het volgende voorbeeld om de uitwerking ervan te zie op de flex items.